<template>
	<view class="content">
		<view class=".logo" @click="picclick">
		<imgBother></imgBother>
		</view>
		<view>
			<text>点击上图 接口地址：{{showurl}}</text>
		</view>
		<view>
			<text v-show="booltest">{{booltest}}</text>
			<text v-if="iftest" >test</text>
		</view>
		
		<view>
			<fatheToSon :hellostring="'测试父组件传参到子组件'"></fatheToSon>
			<text>{{person.username}}{{person.sex}} {{testCompued}} </text>
			<view  data-index="1"  @click="eventClick(1,$event)">事件点击1</view>
			<view  data-index="2"  @click="eventClick(2,$event)">事件点击2</view>

            <sonToFather @sonsentmessage="sonsentmessage"></sonToFather>
			
		</view>
		
		<view v-for="(item,index) in tasklist" :key="item.taskid">
			<text>{{item.taskid}}--{{item.taskname}} {{index}}</text>
		</view>

		<view>----------显示过滤ID>1的tasklist----------</view>
		<view v-for="(item1,index) in filterList" :key="'other-'+item1.taskid">
			<text>{{item1.taskid}}--{{item1.taskname}} {{index}}</text>
		</view>


	</view>
</template>

<script>
/* <view v-for="(item,index) in tasklist" :key="item.taskid">
item 和 index 分别为 循环项和 循环索引∶key指定唯一的属性，用来提高循环效率 
● 通过v-if 来决定显示和隐藏 不适合做频繁的切换显示
● 通过 v-show 来决定显示和隐藏 适合做频繁的切换显示
*/

    /*引入自定义组件 路径@代表SRC目录*/
    import imgBother1 from "@/components/img-bother";
	/*组件传递参数父向子传递参数 通过 属性的方式
    */
	import fatherToSonComponent from "@/components/father-to_sonconpoment";
	/*● 子向父传递参数 通过触发事件的方式● 使用全局数据传递参数 */
    import sonToFather from "@/components/son-to-father";

	export default {
		components:{
			/*注册主键  左边为在本页面组件的名称<imgBother> 右边是import的名称*/
           imgBother:imgBother1,
		   fatheToSon:fatherToSonComponent,
		   sonToFather:sonToFather
		},
		data() {
			return {
				title: 'Hello',
				showurl:this.BaseUrl,/*mian.js 通过VUE原型共享数据 Vue.prototype. 使用页面直接this.BaseUrl*/
				numtest:1000,
				booltest:false,
				iftest:false,
				person:{
					username:"zhitian",
					sex:"男"
				},
				tasklist:[
				{
					taskid:1,
					taskname:"搬砖"
				},
				{
					taskid:2,
					taskname:"吊柱子"
				},{
					taskid:3,
					taskname:"吊板"
				}]
			}
		},
		//计算属性
		computed:
		{
			//把 testCompued看成是在data中的普通的数据一样来使用即可
            testCompued()
			{
				return "计算测试"+this.numtest.toString();
			},
			filterList()
			{
                return this.tasklist.filter(v=>v.taskid>1);
			}
			// ,handleList()
			// {
			// 	return this.tasklist.map(x=>{

            //            v.taskname="处理后任务";
					
			// 		return v;
			// 	});
			// }
		},
		onLoad() {
           console.log(this.BaseUrl);
		   /*App.vue文件通过globalData共享数据 以getApp().globalData.tokendata 使用 */
		   console.log(getApp().globalData.tokendata);
		},
		methods: {
			picclick()
			{
				console.log("点击了图片");
				if(this.booltest==false)
				{
                   this.booltest=true;
				}
				else
				{
					this.booltest=false;
				}
			   
                uni.setNavigationBarTitle({
			      title: "现场管理系统"
			    });
				
			}
			,
			eventClick(num,event)
			{
				//事件的传递 <view  data-index="1"  @click="eventClick(1,$event)">事件点击1</view>
				console.log("num:"+num);
				console.log(event);
			},
			sonsentmessage(e,e2)
			{
				console.log(e,e2);
			}
		}
		,onLoad()
		{

            // wx.request({
			// 	url:this.BaseUrl+"/WeatherForecast",
			// 	success(res)
			// 	{
            //         console.log(res);
			// 	}
			// });
			uni.showLoading();
            uni.request({
				url:this.BaseUrl+"/WeatherForecast",
				success(res)
				{
                    console.log(res);
					
				},
				fail(err)
				{
					 console.log(err);
				},
				complete()
				{
                    uni.hideLoading();
				}

			});
			

			console.log("页面onload");
		}
	}
</script>

<style>
     /*支持小程序的rpx和 h5的vw、vh
● 内置有sass的配置了，只需要安装对应的依赖即可"npm install sass-loader node-sass"
● vue组件中，在 style 标签上加入属性"<style lang= 'scss'>"即可 */
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

</style>
